<template>
	<div class="page-card mb10">
		<el-button @click="onRuleAdd" type="primary" icon="CirclePlus" size="small">添加</el-button>
	</div>
	<div class="page-card">
		<el-table :data="state.ruleList" v-loading="state.loading" row-key="id">
			<el-table-column prop="title" label="名称" />
			<el-table-column prop="route_path" label="路由地址" />
			<el-table-column prop="api_url" label="接口地址" />
			<el-table-column label="类型">
				<template #default="{ row }">
					{{ menuTypeMap[row.type] }}
				</template>
			</el-table-column>
			<el-table-column label="管理" width="200" align="center">
				<template #default="{ row, $index }">
					<el-button @click="onAddSubMenu(row, $index)" type="primary" link>添加下级</el-button>
					<el-button @click="onEdit(row, $index)" type="primary" link>编辑</el-button>
					<el-button @click="onDel(row, $index)" type="primary" link>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<!-- 添加/编辑弹窗 -->
	<el-dialog v-model="state.showRuleDialog" :title="state.dialogTitle" width="50%">
		<el-form :model="ruleForm" label-width="120px">
			<el-form-item label="类型">
				<el-radio-group v-model="ruleForm.type">
					<el-radio :label="1" size="large">菜单</el-radio>
					<el-radio :label="2" size="large">接口</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="父级">
				<!-- <el-tree-select style="width: 100%;" v-model="ruleForm.pid" :props="cascaderProps" :data="state.ruleList" check-strictly /> -->
				<el-cascader style="width: 100%;" :options="state.ruleList" placeholder="顶级菜单" :props="cascaderProps"
					clearable @change="parentChange" />
			</el-form-item>
			<el-form-item label="名称">
				<el-input v-model="ruleForm.title" placeholder="请填写菜单或接口名称" />
			</el-form-item>
			<template v-if="ruleForm.type === 1">
				<el-form-item label="路由地址">
					<el-input v-model="ruleForm.route_path" placeholder="请填写路由地址" />
				</el-form-item>
				<el-form-item label="组件路径">
					<el-input v-model="ruleForm.components_path" placeholder="请填写组件路径" />
				</el-form-item>
			</template>
			<el-form-item v-if="ruleForm.type === 2" label="接口地址">
				<el-input v-model="ruleForm.api_url" placeholder="请填写接口地址" />
			</el-form-item>
			<el-form-item label="状态">
				<el-radio-group v-model="ruleForm.status" class="ml-4">
					<el-radio :label="1" size="large">启用</el-radio>
					<el-radio :label="0" size="large">关闭</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :loading="state.submitLoading" @click="onSubmit">保存</el-button>
				<el-button @click="state.showRuleDialog = false">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>
<script setup>
import { reactive,ref, onMounted } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import { ruleListAll, ruleDelete, ruleSave } from "@/api/user"

const menuTypeMap = { 1: "菜单", 2: "接口" }

const cascaderProps = {
	checkStrictly: true,
	label: 'title',
	value: 'id'
}

const state = reactive({
	ruleList: [],
	loading: false,
	showRuleDialog: false,
	dialogTitle: '',
	submitLoading: false
})

const ruleForm = ref({
	pid: 0,
	type: 1,  //1 菜单，2 接口
	title: '',
	components_path: '',
	route_path: '',
	api_url: '',
	status: 1
})

onMounted(function () {
	getRuleList();
})

function getRuleList() {
	state.loading = true;
	ruleListAll().then(res => {
		if (res.code == 1) {
			state.ruleList = res.result;
		}

		state.loading = false;
	});
}

function onSubmit() {
	state.submitLoading = true;
	ruleSave(ruleForm.value).then(res => {
		if (res.code == 1) {
			ElMessage({
				type: 'success',
				message: '添加成功',
			})

			getRuleList();
			state.showRuleDialog = false;
		}

		state.submitLoading = false;
	})
}

function onRuleAdd() {
	state.showRuleDialog = true;
	state.dialogTitle = '添加权限'
	ruleForm.value = {
		pid: 0,
		type: 1,
		title: '',
		components_path: '',
		route_path: '',
		api_url: '',
		status: 1
	}
}

function parentChange(e) {
	let i = e.length;

	ruleForm.value.pid = e[i - 1]
}

function onAddSubMenu(row, index) {
	ruleForm.value.pid = row.id;
	state.showRuleDialog = true;
}

function onEdit(row, index) {
	ruleForm.value = JSON.parse(JSON.stringify(row));
	state.showRuleDialog = true;
}

function onDel(row, index) {
	ElMessageBox.confirm(
		'确认删除?',
		'提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}
	).then(() => {
		let ids = []

		ids.push(row.id)

		ruleDelete({
			rule_ids: ids
		}).then(res => {
			if (res.code == 1) {
				ElMessage({
					type: 'success',
					message: '删除成功',
				})

				getRuleList();
			}
		})
	})
}
</script>

<style lang="scss" scoped="scoped">
.img-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2px;

	img {
		width: 100%;
		height: 80px;
	}
}
</style>
